<template>
    <AdminMain>
        <el-button type="primary" size="large" @click="showDrawer('create')">新建分类</el-button>
        <el-table class="assort-table" :data="assortList" border stripe>
            <el-table-column prop="id" label="ID" width="90" align="center" />
            <el-table-column prop="name" label="分类名称" width="180" />
            <el-table-column prop="sort" label="排序" width="120" />
            <el-table-column prop="created_at" label="创建时间" align="center" :formatter="formatTime" min-width="180" />
            <el-table-column prop="updated_at" label="最后修改时间" align="center" :formatter="formatTime" min-width="180" />
            <el-table-column label="操作" width="140" align="center">
                <template #default="{ row }">
                    <el-button type="primary" size="small" @click="showDrawer('update', row)">编辑</el-button>
                    <el-popconfirm title="确定要删除吗?" @confirm="delAssort(row.id)">
                        <template #reference>
                            <el-button type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer v-model="drawer" :title="drawerTitle" :before-close="handleClose">
            <el-form :model="assort_form" ref="form" :rules="rules" label-width="80px">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="assort_form.name"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="assort_form.sort"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button @click="handleClose">取消</el-button>
                </el-form-item>
            </el-form>

        </el-drawer>
    </AdminMain>
</template>

<script setup lang="ts">
import AdminMain from '@/layout/adminMain.vue'
import { FormInstance, FormRules } from 'element-plus'
import { ref, onBeforeMount, reactive } from 'vue'
import { createAssort, deleteAssort, updateAssort, getAssorts } from '@/apis/auth'
import { formatTime } from '@/utils/help'

const assortList = ref<AssortModel[]>()
const assort_form = ref<AssortModel>({ name: "", sort: 10 })
const drawer = ref(false)
const drawerTitle = ref('新建分类')
const form = ref<FormInstance>()
const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入分类名称', trigger: 'blur', },
    { max: 20, message: '分类名称最多20个字符', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur', },
    { type: 'number', message: '排序必须为数字', trigger: 'blur' }],
})

async function getAssortList() {
    const r = await getAssorts()
    console.log(r)
    assortList.value = r.data
}
function showDrawer(type: string = 'create', row?: AssortModel) {
    drawerTitle.value = type === 'create' ? '新建分类' : '修改分类'
    row && (assort_form.value = row)
    drawer.value = true
}
function handleClose() {
    assort_form.value = { name: "", sort: 10 }
    drawer.value = false
}
function onSubmit() {
    form.value?.validate(async (valid) => {
        if (valid) {
            const r = drawerTitle.value === '新建分类' ? await createAssort(assort_form.value) : await updateAssort(assort_form.value)
            if (r.error_code == 0) {
                await getAssortList()
                handleClose()
            }
        }
    })
}
function delAssort(id: number) {
    deleteAssort(id).then(r => {
        if (r.error_code == 0) {
            getAssortList()
        }
    })
}


onBeforeMount(() => {
    getAssortList()
})
</script>

<style lang="scss" scoped>
.assort-table {
    margin: 20px 0;
}
</style>